<template>
  <div>
    <card>
      <p class="close" slot="extra" @click="showChange('content')">
        <Icon type="md-close"/>
      </p>
      <p slot="title">内容管理</p>
      
      <table>
        <thead>
          <td>标题</td>
          <td>导航</td>
          <td>标签</td>
          <td>时间</td>
          <td>浏览量</td>
          <td>概要</td>
          <td>操作</td>
        </thead>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{item.title}}</td>
          <td>{{item.type}}</td>
          <td>tags</td>
          <td>{{new Date(item.date).toLocaleDateString()}}</td>
          <td>{{item.browse}}</td>
          <td><p class="brief">{{item.brief}}</p></td>
          <td>
            <div class="bt" @click="btClick(item._id)">编辑</div>
          </td>
        </tr>
      </table>

      <Page
      class="page"
      :current="page"
      :total="total"
      :page-size="pageSize"
      simple
      size="small"
      @on-change="pageChange"
    />
      <!-- <Button type="info" @click>修改</Button> -->
    </card>
  </div>
</template>

<script>
export default {
  props: ['showChange', 'setChange'],
  data() {
    return {
      page:1,
      pageSize:null,
      list:[],
      total:null,

    }
  },
  mounted() {
    this.pageChange(this.page)
  },
  methods: {
    pageChange(page) {
      // window.location.href = `/?page=${page}`
      this.$axios.get(`/api/list?page=${page}`).then(response => {
        this.pageSize = response.data.pageSize
        this.total = response.data.total
        this.list = response.data.result
      })
    },
    btClick(index){
      alert(index)
    }
  },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
table {
  td {
    width: 100px;
    height: 45px;
    .brief {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.bt {
  width: 80px;
  padding: 5px 15px;
  border-radius: 5px;
  margin-left: 10px;
  color: #fff;
  background-color: #2db7f5;
  cursor: pointer;
  &:hover{
    background-color: #57c5f7;
  }
}
.page {
  text-align: center;
  margin-top: 50px;
  padding: 0;
}

</style>
